import React, {Component} from 'react'
import {connect} from 'react-redux'
// import {Col, Button} from 'antd'
import {NavLeftWrapper} from "./styled";
import {Menu, Icon} from 'antd';

const SubMenu = Menu.SubMenu;

class NavLeft extends Component {
    renderNav = (menu) => {
           return (
           <Menu theme="dark" mode="inline">
               {menu.map((item)=>{
                   if (item.get('children')){
                       return(
                           <SubMenu key={item.get('id')} title={<span><Icon type="mail" /><span>{item.get('name')}</span></span>}>
                                {this.renderNav(item.get('children'))}
                           </SubMenu>
                       )
                   }
                   return (
                       <Menu.Item key={item.get('id')}>
                           <Icon type="pie-chart" />
                           <span>{item.get('name')}</span>
                       </Menu.Item>
                   )
               })}
        </Menu>)

    }

    render() {
        const {menu} = this.props
        return (
            <NavLeftWrapper>
                {menu.map((item1)=>{
                    if (item1.get('children')){
                        return(
                            <SubMenu key={item1.get('id')} title={<span><Icon type="mail" /><span>{item1.get('name')}</span></span>}>
                                {item1.get('children').map((item2)=>{
                                    <SubMenu key={item2.get('id')} title={<span><Icon type="mail" /><span>{item2.get('name')}</span></span>}>

                                    </SubMenu>
                                })}





                            </SubMenu>
                        )
                    }
                    return (
                        <Menu.Item key={item1.get('id')}>
                            <Icon type="pie-chart" />
                            <span>{item1.get('name')}</span>
                        </Menu.Item>
                    )
                })}
            </NavLeftWrapper>
        )
    }
}

const mapState = (state) => ({
    menu: state.getIn(['navLeft', 'menu']),
})
const mapDispatch = (state) => ({})

export default connect(mapState, mapDispatch)(NavLeft)
